<template>
<div>
  <div>
         <span><el-button
        v-on:click="uploadPlans()"
         >上传文件</el-button></span>
         </div>
<div class="box">
  <div id="preview" name="file" v-on:paste="handlePaste">
      <span style="color:#999">将图片按Ctrl+V 粘贴至此处</span>
  </div>
  <!-- <el-button
        v-on:click="uploadPlans()"
         >上传文件</el-button> -->

</div>  

</div>

</template>

<script>//importFile
import minioApi from '@/api/dfs/upload'
export default {
  name: 'picture_upload',
  methods:{
     // 监听粘贴操作
    handlePaste(event) {
      const items = (event.clipboardData || window.clipboardData).items;
      let file = null;

      if (!items || items.length === 0) {
        this.$message.error("当前浏览器不支持本地");
        return;
      }
      // 搜索剪切板items
      for (let i = 0; i < items.length; i++) {
        if (items[i].type.indexOf("image") !== -1) {
          file = items[i].getAsFile();
          break;
        }
      }
      if (!file) {
        this.$message.error("粘贴内容非图片");
        return;
      }
      // 此时file就是我们的剪切板中的图片对象
      // 如果需要预览，可以执行下面代码
      const reader = new FileReader();
      reader.onload = event => {
        preview.innerHTML = `<img src="${event.target.result}">`;
      };
      reader.readAsDataURL(file);
      this.file = file;
      this.uploadPlans();//自动上传
    },
    //上传文件成功后回调
     uploadPlans() {
      let file = this.file;
      if (!file) {
        this.$message.error("请粘贴图片后上传");
        return;
      }
      this.loading = true;
      let form = new FormData();
      form.append("file", file);
      form.append("type", this.type);
    //uploadCertificate是封装的axios请求，自己根据需求传参
    alert(form)
    //console.log(form)
      minioApi.upload_two(form)
        .then(data => {
          if (data.code==20000) {
            this.certificate_pic = data.data;
            alert(this.certificate_pic)
            this.$message.success("截图上传成功！");
            // this.$message.success(this.name + "上传成功！");            
          } else {
            this.$message.error("截图上传失败！");
          }
        }).catch(() => {
            console.log("请求失败:"+error)
        });
    },

  }
}
</script>
<style>
    .box {
        width: 160px;
        height: 210px;
        resize: none;
        border: 1px solid #d2d2d2;
        border-radius: 4px;
      }
</style>